<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="style.css"/>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!--vue-app是根容器-->
<div id="vue-app">
    <h1> v-for 循环 </h1>
    <ul>
        <li v-for="character in characters">
            {{character}}
        </li>
    </ul>

    <ul>
        <li v-for="(user,index) in users">
            {{index+1}}--{{user.name}}--{{user.age}}
        </li>
    </ul>

    <div v-for="(user,index) in users">
        <h3>{{index}}.{{user.name}}</h3>
        <p>Age - {{user.age}}</p>
    </div>

    <hr>

    <template v-for="(user,index) in users">
        <h3>{{index}}.{{user.name}}</h3>
        <p>Age - {{user.age}}</p>
    </template>

    <hr>
    <h2>遍历model</h2>

    <template v-for="(user,index) in users">
        <div>{{user}}</div>
        <div v-for="(val,key) in user">
            <p>{{key}} - {{val}}</p>
        </div>
    </template>
</div>

<script src="app.js"></script>
</body>
</html>